{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">


    <title>{% block title %}{% endblock %}srvup Project</title>

    <!-- Bootstrap core CSS -->
    <!-- <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <!-- Custom styles for this template -->
    <style>
    body {
	  /*min-height: 2000px;*/
	}
  .main-container {
    min-height: 950px;
  }
  .footer {
    background-color:#C5c5c5;
    min-height: 50px;
    padding: 20px 0px;
    text-align: center;
    margin-top: 50px;
  }
  .navbar-default {
  margin-bottom: 0px;
}

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

.container-fluid .jumbotron {
  border-radius: 0px;
}

/*
	.navbar-static-top {
	  margin-bottom: 19px;
	}*/

  .navbar-default {
    background-color: #005880;
    border-color: #256582;
    background-image: url("http://www.transparenttextures.com/patterns/batthern.png");
  }

  .navbar-default .navbar-nav>li>a {
  color: #C5C5C5;
  }
  .navbar-default .navbar-nav>li>a:hover {
  color: #FFFFFF;
  }
  .navbar-default .navbar-brand {
  color: #FFFFFF;
  }
  .navbar-default .navbar-brand:hover {
  color: #256582;
  }

  .panel-jumbotron {
    margin-top: 0px !important;
  border-radius: 0px 4px 4px 4px;
  min-height: 320px;
  text-align: center;
  }
  .panel-jumbotron p {
    font-size: 16px;
  }

  .nav-tabs-jumbotron {
    border-bottom: 0px solid #ddd;
  }

  .nav-tabs-jumbotron>li>a {
    color: #FFF;
    background-color: #999;
    border: 1px solid transparent;
    border-bottom-width: 0;
  }

  .nav-tabs-jumbotron>li {

  }
  .nav-tab-item-jumbotron {
    
  }



	{% block style %}

	{% endblock %}
	</style>
	{% include 'extra_head_info.html' %}

  </head>

  <body>

  {% include 'navbar.html' %}
  
  {% block jumbotron %}
  {% endblock %}

    <div class="container main-container">
    

    <div id='notificationsLoader'>

    </div>
      {% if messages %}
        {% for message in messages %}
        <div class="alert {% if 'error' in message.tags %}alert-warning{%else %}alert-success{% endif %}" role="alert">{% if 'safe' in message.tags %}{{ message|safe }}{% else %} {{ message }}{% endif %}
        </div>
        
        {% endfor %}
      {% endif %}
    	{% block content %}
    	{% endblock %}

      <!-- Main component for a primary marketing message or call to action 
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div> -->

    </div> <!-- /container -->

    {% include 'footer.html' %}

    {% include 'javascript.html' %}
    <script>
      $(document).ready(function(){
        // alert('jquery woking');
        {% block jquery %}
        {% endblock %}

      });
    </script>
    <script>
    $(document).ready(function(){
      $(".notification-toggle").click(function(e){
        e.preventDefault();
        $.ajax({
          type: "POST",
          url: "{% url 'get_notifications_ajax' %}",
          data: {
            csrfmiddlewaretoken: "{{ csrf_token }}",
          },
          success: function(data){
            $("#notification_dropdown").html(' <li role="presentation" class="dropdown-header">Notifications</li>');
            var count = data.count
            console.log(count)
            if (count == 0) {
              var url = '{% url "notifications_all" %}'
              $("#notification_dropdown").append("<li><a href='" + url+ "'>View All Notifications</a></li>")
            } else {
              $(data.notifications).each(function(){
                var link = this;
                $("#notification_dropdown").append("<li>" + link + "</li>")

              })
            }
            console.log(data.notifications);

          },
          error: function(rs, e) {
            console.log(rs);
            console.log(e);
          }

        })

      })

    })
    </script>


  </body>
</html>